<!--
  @Descripttion:用户中心-身份认证
  @Author：yejianbo
  @Date：2022年05月26日 12:35:40
-->
<template>
  <div class="audit-id-page">
  <section class="page">
    <!-- 头部导航栏 -->
    <HeaderCom />
    <div class="content-page">
      <img
        src="@/assets/images/user/banner.png"
        alt="用户中心"
        class="bannber"
      />
      <div class="content">
        <el-breadcrumb
          separator-class="el-icon-arrow-right"
          style="margin-bottom: 20px"
        >
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ name: 'userCenter' }"
            >用户中心</el-breadcrumb-item
          >
          <el-breadcrumb-item>
            <span style="color: #3d6cb0">身份认证</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
        <div class="names"><span>姓名：</span>{{USER_INFO.studentName}}</div>
        <div class="auth-status" v-if="(USER_INFO.remark&&USER_INFO.status=='2')">
          <img src="../../assets/images/user/unauth.png">
          审核不通过：{{USER_INFO.remark}}
        </div>
        <div class="content-title" v-if="isChina">身份证信息</div>
        <el-form
          ref="form"
          label-position="left"
          label-width="120px"
        >
          <el-form-item label="学生类型" required>
            <!-- studentAbroad  学生类型;1:国内,2:国外 -->
            <el-select v-model="studentAbroad" placeholder="请选择学生类型">
                <el-option
                label="中国内地学生"
                :value="1">
                </el-option>
                <el-option
                label="非中国内地学生"
                :value="2">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身份证号码" required  v-if="isChina && studentAbroad === 1">
            <span slot="label" class="left-label">身份证号码</span>
            <el-input
              v-model="cardNo"
              style="width: 430px"
              type="text"
              :maxlength="18"
              oninput="if(value.length>18)value=value.slice(0,18)"
              placeholder="请输入身份证号码"
            />
          </el-form-item>
          <el-form-item label="护照编号" required  v-if="studentAbroad === 2">
            <span slot="label" class="left-label">护照编号</span>
            <el-input
              v-model="passport"
              style="width: 430px"
              type="text"
              :maxlength="18"
              oninput="if(value.length>18)value=value.slice(0,18)"
              placeholder="请输入护照编号"
            />
          </el-form-item>
          <el-form-item label="认证邮箱" required  v-if="!isChina">
            <span slot="label" class="left-label">认证邮箱</span>
            <el-input
              v-model="USER_INFO.email"
              style="width: 430px"
              placeholder="请输入认证邮箱"
            />
            <div class="email_tips">（请确认您的邮箱地址，我们将通过该邮箱进行邀请认证，请输入本学校学生邮箱）</div>
          </el-form-item>
        </el-form>
        <el-row type="flex" class="row-bg" justify="center" v-if="isChina">
            <!-- 
                注意：isChina变量判断的是手机号11位，这里并不准确，海外学生到国内生活也会有国内手机号码，
                从而三要素认证无法通过。
                解决方案：老逻辑不变（即手机号非11位走邮箱认证），（手机号11位的）直接让学生自己选择【中国内地学生】、【非中国内地学生】，
                正常提交，不做三要素认证，在运营端审核时再做三要素认证，
             -->
          <div
            style="width: 485px;  margin: 0 50px 52px;  height: 272px; position: relative;"
            v-loading="loading3"
            element-loading-text="上传中"
            element-loading-spinner="el-icon-loading"
          >
            <div class="demo-image__preview" v-if="frontPic2">
              <el-image
                fit="scale-down"
                :src="frontPic2"
                :preview-src-list="[frontPic2]"
              >
              </el-image>
              <div v-if="USER_INFO.status === '0'||USER_INFO.status === '2'" class="close" @click="delImg('frontPic2')">
                <i class="el-icon-close"></i>
              </div>
            </div>
            <el-upload
              v-else
              id="uploadNumOne"
              class="avatar-uploader"
              :action="action"
              :show-file-list="false"
              :on-success="handleAvatarSuccess3"
              :before-upload="beforeAvatarUpload3"
              :on-error="onError3"
            >
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="tips">请上传{{studentAbroad === 1 ? '身份证': '护照'}}正面照片</div>
          </div>
          <div
            style="width: 485px;margin: 0 50px 52px; height: 272px;position: relative;  "
            v-loading="loading4"
            element-loading-text="上传中"
            element-loading-spinner="el-icon-loading"
          >
            <div class="demo-image__preview" v-if="endPic2">
              <el-image
                fit="scale-down"
                :src="endPic2"
                :preview-src-list="[endPic2]"
              >
              </el-image>
              <div class="close" v-if="USER_INFO.status === '0'||USER_INFO.status === '2'"  @click="delImg('endPic2')">
                <i class="el-icon-close"></i>
              </div>
            </div>
            <el-upload
              v-else
              id="uploadNumTwo"
              class="avatar-uploader"
              :action="action"
              :show-file-list="false"
              :on-error="onError4"
              :on-success="handleAvatarSuccess4"
              :before-upload="beforeAvatarUpload4"
            >
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="tips">请上传{{studentAbroad === 1 ? '身份证': '护照'}}反面照片</div>
          </div>
        </el-row>
        <div class="content-title">学生证信息</div>
        <div class="tips-text">在校生请上传学生证，毕业生请上传毕业证</div>
        <el-row type="flex" class="row-bg" justify="center">
          <div
            style=" width: 485px; margin: 0 50px 52px; height: 272px; position: relative;"
            v-loading="loading"
            element-loading-text="上传中"
            element-loading-spinner="el-icon-loading"
          >
            <div class="demo-image__preview" v-if="frontPic">
              <el-image
                fit="scale-down"
                :src="frontPic"
                :preview-src-list="[frontPic]"
              >
              </el-image>
              <div v-if="USER_INFO.status === '0'||USER_INFO.status === '2'" class="close" @click="delImg('frontPic')">
                <i class="el-icon-close"></i>
              </div>
            </div>
            <el-upload
              v-else
              id="uploadOne"
              class="avatar-uploader"
              :action="action"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :on-error="onError"
            >
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="tips">
              认证材料正面
              <el-popover placement="top-start" title="证件示例" trigger="click">
                <slot name="content">
                  <img src="@/assets/images/user/id-front.jpg" alt="" />
                </slot>
                <i class="el-icon-warning hover-icon" slot="reference"></i>
              </el-popover>
            </div>
          </div>
          <div
            style="width: 485px;margin: 0 50px 52px; height: 272px;position: relative;"
            v-loading="loading2"
            element-loading-text="上传中"
            element-loading-spinner="el-icon-loading"
          >
            <div class="demo-image__preview" v-if="endPic">
              <el-image
                fit="scale-down"
                :src="endPic"
                :preview-src-list="[endPic]"
              >
              </el-image>
              <div class="close" v-if="USER_INFO.status === '0'||USER_INFO.status === '2'"  @click="delImg('endPic')">
                <i class="el-icon-close"></i>
              </div>
            </div>
            <el-upload
              v-else
              id="uploadTwo"
              class="avatar-uploader"
              :action="action"
              :show-file-list="false"
              :on-error="onError"
              :on-success="handleAvatarSuccess2"
              :before-upload="beforeAvatarUpload2"
            >
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="tips">
              认证材料反面
              <el-popover placement="top-start" title="证件示例" trigger="click">
                <slot name="content">
                  <img src="@/assets/images/user/id-back.jpg" alt="" />
                </slot>
                <i class="el-icon-warning hover-icon" slot="reference"></i>
              </el-popover>
            </div>
          </div>
        </el-row>
        <el-button
          class="submit-btn"
          :disabled="frontPic === '' || endPic === ''"
          type="primary"
          @click="submit"
          >{{`${USER_INFO.status === '1' ? '已通过认证' : USER_INFO.status=='2' ? '提交认证' :'点击上传'}`}}
        </el-button>
      </div>
      <FooterCom></FooterCom>
    </div>
  </section>
    <!-- 阿里认证弹窗 -->
    <div class="showAuthentication" v-if="showAuthentication">
      <div class="showAuthenticationBox">
        <div class="title">实名认证</div>
        <div class="content" v-loading="showLoading">
          {{authenticationTitle === '认证成功' ? '确认提交' : authenticationTitle}}
        </div>
        <div class="btns">
          <div class="cancel" @click="showAuthentication=!showAuthentication">取消</div>
          <!-- <div v-if="authenticationTitle === '认证成功'" class="submit" @click="toUpUserInfo(authenticationTitle!=='认证成功')">提交</div> -->
          <div class="submit" @click="toUpUserInfo(false)">提交</div>
        </div>
      </div>
    </div>
    <!-- 邮箱认证弹窗 -->
    <div class="showAuthentication" v-if="showEmails">
      <div class="showAuthenticationBox emails">
        <div class="title">实名认证</div>
        <div class="title2">审核通过后，我们将通过该邮箱发送认证邀请，请确认邮箱地址是否正确：</div>
        <div class="content2">{{USER_INFO.email}}</div>
        <div class="btns">
          <div class="cancel" @click="showEmails=!showEmails">返回修改</div>
          <div class="submit" @click="toUpUserInfo(false)">确定并提交</div>
        </div>
      </div>
    </div>
    <!-- <Authentication/> -->

  <MobliePage
    :userInfo="USER_INFO"
    :isChina="isChina"
    :cardNoNew="cardNo"
    :frontPic2="frontPic2"
    :endPic2="endPic2"
    :frontPic="frontPic"
    :endPic="endPic"
    @uploadImg="uploadImgMobile"
    @deleteImg="deleteImgMobile"
    @submit="submitMobile"
  />
  </div>
</template>

<script>
import FooterCom from "@/components/footer/index.vue";
import HeaderCom from "@/components/header/index.vue";
import imageUpload from "@/components/ImageUpload/index.vue";
import { mapState } from "vuex";
import { upUserInfo } from "../../request/api";
// import { upUserInfo,isRealName } from "../../request/api";
import Authentication from "@/components/authentication/index.vue";
import { checkEmail } from "../../utils/utils"
import MobliePage from './mobile/auditId.vue';
import { validateIdCard } from '@/utils/utils'
export default {
  // 组件名称
  name: "userCenter",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { HeaderCom, FooterCom, imageUpload, Authentication, MobliePage },
  computed: {
    ...mapState(["USER_INFO",'isChina']),
  },
  created() {
  },
  watch: {
    USER_INFO: function (newValue, oldValue) {
      this.frontPic = this.USER_INFO.authenticationFrontPictureUrl || ''
      this.endPic = this.USER_INFO.authenticationBackPictureUrl || ''
      this.frontPic2 = this.USER_INFO.authenticationCardFrontPictureUrl || ''
      this.endPic2 = this.USER_INFO.authenticationCardBackPictureUrl || ''
      this.cardNo = this.USER_INFO.cardNo || ''
      if (Number(newValue.status) === 1){
        this.$router.replace({path: '/userCenter'})
      }
    },
  },
  // 组件状态值
  data() {
    return {
      studentAbroad: 1, // studentAbroad  学生类型;1:国内,2:国外
      showLoading: false,
      showAuthentication: false,
      frontPic: "", // 正面照
      endPic: "", // 反面照
      frontPic2: "", // 身份证正面照
      endPic2: "", // 身份证反面照
      cardNo: '',//身份证号码
      passport: '',// 护照号码，海外学生专用
      action:
        process.env.VUE_APP_BASE_API + "/app-api/student/web-student/upload",
      loading: false,
      loading2: false,
      loading3: false,
      loading4: false,
      authenticationTitle: '认证中',
      showEmails: false,
    };
  },
  // 组件方法
  methods: {
    checkFile(file) {
      const isFlag = file.type === "image/jpeg" || "image/png" || "image/jpg";
      if (!isFlag) {
        this.$message.error("上传头像图片只能是 JPG、jpg、png 格式!");
      }
      return isFlag;
    },
    handleAvatarSuccess(res, file) {
      this.frontPic = file.response.data;
      this.loading = false;
    },
    handleAvatarSuccess2(res, file) {
      this.endPic = file.response.data;
      this.loading2 = false;
    },
    handleAvatarSuccess3(res, file) {
      this.frontPic2 = file.response.data;
      this.loading3 = false;
    },
    handleAvatarSuccess4(res, file) {
      this.endPic2 = file.response.data;
      this.loading4 = false;
    },
    beforeAvatarUpload(file) {
      let falg = this.checkFile(file);
      this.loading = falg;
      return falg;
    },
    beforeAvatarUpload2(file) {
      let falg = this.checkFile(file);
      this.loading2 = falg;
      return falg;
    },
    beforeAvatarUpload3(file) {
      let falg = this.checkFile(file);
      this.loading3 = falg;
      return falg;
    },
    beforeAvatarUpload4(file) {
      let falg = this.checkFile(file);
      this.loading4 = falg;
      return falg;
    },
    onError2() {
      this.loading2 = false;
    },
    onError() {
      this.loading = false;
    },
    onError3() {
      this.loading4 = false;
    },
    onError4() {
      this.loading4 = false;
    },
    delImg(key) {
      this[key] = ''
    },
    toUpUserInfo(falg){
      if(falg) return
      this.USER_INFO.authenticationFrontPictureUrl = this.frontPic;
      this.USER_INFO.authenticationBackPictureUrl = this.endPic;
      this.USER_INFO.authenticationCardFrontPictureUrl = this.frontPic2;
      this.USER_INFO.authenticationCardBackPictureUrl = this.endPic2;
      this.isChina&&(this.USER_INFO.cardNo = this.cardNo);
      this.USER_INFO.status = '3'
      this.USER_INFO.passport = this.passport
      this.USER_INFO.studentAbroad = this.studentAbroad
      this.showEmails = false
      upUserInfo(this.USER_INFO).then((res) => {
        if (res.data) {
          this.$message({
            message: "已上传成功，在审核",
            type: "success",
          });
          this.$router.push({ name: 'userCenter' });
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    submit() {
      if(this.isChina){
        if (this.studentAbroad === 1 && !this.cardNo) {
          this.$message({
            message: "请输入身份证号码",
            type: "warning",
          });
          return;
        }
        if (this.studentAbroad === 1 && !validateIdCard(this.cardNo)){
            this.$message({
            message: "身份证号码格式有误，请重新输入",
            type: "warning",
          });
          return;
        }
        if (this.studentAbroad === 2 && !this.passport){
            this.$message({
            message: "请输入护照编号",
            type: "warning",
          });
          return;
        }
        if (!this.frontPic2) {
          this.$message({
            message: "请上传身份证正面照片",
            type: "warning",
          });
          return;
        }
        if (!this.endPic2) {
          this.$message({
            message: "请上传身份证反面照片",
            type: "warning",
          });
          return;
        }
      }else{
        if (!checkEmail(this.USER_INFO.email)) {
          this.$message({
            message: "请正确输入邮箱",
            type: "warning",
          });
          return;
        }
        this.showEmails = true
        return
      }
      this.$confirm(
//         `1.注册人与实名认证证件上的“姓名”必须保持完全一致。<br/>
// 2.为了缩短审核时长，请确认上传照片清晰展示以下内容：学校名称、姓名、学生证号、个人照片。证件名称中如果包含括号，则需要填写，括号类型与证件保持一致。<br/>
// 3.必须确保扫照片无遮挡、无涂抹、无反光、无水印（ 含相机自带水印）。<br/>
// 4.必须包含证件边框、清晰完整的红色公章和钢印。<br/>
// 5.上传成功，两个工作日通过审核`,
          `为缩短审核时长，请确认上传照片清晰展示以下内容：<br/>
          学校名称、学生名称、学生证号、学生照片；<br/>
          我们将对您的手机号和身份证进行实名认证<br/>`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          dangerouslyUseHTMLString:true
        }
      )
      .then(() => {
        // if(this.USER_INFO.isRealName){
        //   this.toUpUserInfo()
        //   return
        // }
        this.authenticationTitle = '认证成功'
        this.toUpUserInfo(false)
        // this.showLoading = true
        // this.showAuthentication = true
        // isRealName({
        //   cardNo: this.cardNo,
        //   phone: this.USER_INFO.mobile,
        //   userName: this.USER_INFO.nickname
        // }).then(res => {
        //   this.showLoading = false
        //   let {code, message} = res.data
        //   if(Number(code) === 1){
        //     this.authenticationTitle = '认证成功'
        //   }else{
        //     this.authenticationTitle = message || '认证失败'
        //   }
        // }).catch(err=>{
        //   this.showLoading = false
        // })
      })
      .catch(() => {});
    },
    submitMobile({ cardNo, email, passport, studentAbroad }) {
      this.cardNo = cardNo
      this.email = email
      this.studentAbroad = studentAbroad
      this.passport = passport
      this.width = '80%'
      this.submit()
    },
    uploadImgMobile({ key }) {
      const dom = document.getElementById(key)
      if (dom) dom.getElementsByClassName('el-upload')[0].click()
    },
    deleteImgMobile({ key }) {
      this.delImg(key)
    }
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">

@media screen and (max-width: 750px) {
  #app {
    min-width: auto;
  }
  .audit-id-page {
    > .page {
      display: none !important;
    }
    > .mobile-audit-page {
      display: block !important;
      .btn-box {
        display: flex !important;
      }
    }
  }
  .el-message-box,
  .showAuthenticationBox {
    width: 80% !important;
  }
  .showAuthenticationBox .btns > div {
    width: 45% !important;
  }

}
</style>
<style lang="less" scoped>
.demo-image__preview {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;

  .el-image {
    width: 100%;
    height: 100%;
  }
}

.tips {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 20px;
  height: 30px;
  margin-top: 15px;
  width: 100%;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #37383D;
  line-height: 28px;

  i {
    color: #6fc70f;
    margin-left: 10px;
    line-height: 28px;
  }
}

.close {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 20px;
  height: 20px;
  right: 0;
  top: 20px;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
}

.avatar-uploader {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 9px;
  border: 2px dashed #3D6CB0;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 38px;
  color:  #3D6CB0;
  font-weight: 600;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.page {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 1000px;

  .content-page {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 80px;
    overflow-y: auto;
    .names{
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383D;
      line-height: 21px;
      margin-bottom: 20px;
      display: flex;
      span{
        color: #9597A0;
        width: 78px;
        margin-right: 20px;
      }
    }

    .auth-status {
      display: inline-flex;
      padding: 10px 10px;
      padding-left: 27px;
        background: rgba(254,78,61,0.1);
      border-radius: 4px;
      border: 1px solid #FE4E3D;
      position: relative;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FE4E3D;
      line-height: 1;
      margin-bottom: 15px;
      img{
        position: absolute;
        left: 8px;
        width: 15px;
        height: 18px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .email_tips{
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597A0;
      line-height: 17px;
      margin-top: 15px;
    }

    .bannber {
      position: relative;
      display: block;
      width: 100%;
      margin-bottom: 25px;
      object-fit: cover;
      height: 170px;
    }

    .content {
      position: relative;
      width: 1200px;
      padding: 23px 30px;
      margin: 0 auto;

      .content-title {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383D;
        line-height: 25px;
        margin-bottom: 16px;
        &::before {
            content: '*';
            color: #F56C6C;
            margin-right: 4px;
        }
      }
      /deep/.el-form-item__label{
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
      }


      .tips-text {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597A0;
        line-height: 20px;
        margin-bottom: 20px;
      }

      .explan-content {
        width: 385px;
        height: 216px;
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #37383d;
        line-height: 33px;
        text-align: center;
        margin-top: 25px;

        img {
          max-width: 385px;
        }
      }
      .submit-btn {
        display: block;
        width: 364px;
        height: 55px;
        background: #4677B9;
        border-radius: 3px;
        margin: 33px auto 40px;
        &.uns{
          background: #ccc;
          cursor: not-allowed;
        }
      }
    }
  }
}
/deep/ .el-breadcrumb__inner {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #37383d;
  line-height: 28px;
  cursor: pointer;
}
.hover-icon {
  cursor: pointer;
}
.showAuthentication{
    position: fixed;
    z-index: 2014;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
  .showAuthenticationBox{
    width: 360px;
    height: 241px;
    padding: 66px 30px 90px;
    border-radius: 12px;
    background: #fff;
    position: relative;
    .content{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383D;
      line-height: 21px;
    }
    .content2{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383D;
      line-height: 21px;
    }
    .title{
      position: absolute;
      width: 100%;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #37383D;
      line-height: 25px;
      top:25px;
    }
    .title2{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383D;
      line-height: 20px;
      margin-bottom: 12px;
    }
    .btns{
      width: 100%;
      height: 40px;
      position: absolute;
      bottom: 40px;
      left: 0;
      display: flex;
      justify-content: space-between;
      padding: 0 40px;
      &>div{
        width: 130px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #4677B9;
        border: 1px solid #4677B9;
        border-radius: 2px;
        cursor: pointer;
        &.submit{
          background: #4677B9;
          color: #fff;
          border: none;
        }
      }
    }
  }
}
/deep/ .el-input__suffix{
  display: none;
}

</style>
